<template>
  <div style="width: 650px;height: 400px" ref="projectmapChart">

  </div>
</template>

<script>
  // 中国地图
  require('echarts/map/js/china')
  import { mapGetters } from 'vuex'
  export default {
    name: 'projectMap',
    data () {
      return {
        provinceList: [],
        mapData: [[{name: '佛山'}, {name: '佛山', value: [112.8955, 23.1097, 1000]}]]
      }
    },
    mounted () {
      this.init()
      this.getProjectList()
    },
    watch: {
      currentUser () {
        if (this.currentUser.companyAdmin) {
          this.getProjectList()
        }
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    methods: {
      init () {
        let myChart = this.$echarts.init(this.$refs.projectmapChart)
        let BJData = this.mapData
        let convertData = function (data) {
          let res = []
          for (let i = 0; i < data.length; i++) {
            let dataItem = data[i]
            let fromCoord = [(dataItem[1].value)[0], (dataItem[1].value)[1]]
            let toCoord = [112.8955, 23.1097]       // 佛山位置
            if (fromCoord && toCoord) {
              res.push({
                fromName: dataItem[0].name,     // 开始位置
                toName: dataItem[1].name,       // 结束位置
                coords: [fromCoord, toCoord]
              })
            }
          }
          return res
        }
        let series = []
        series.push({
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 2
          },
          lineStyle: {
            normal: {
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData(BJData)
        },
          {
            type: 'lines',
            zlevel: 2,
            symbol: ['none'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'emptyCircle',
              symbolSize: 1
            },
            label: {
              normal: {
                show: false
              }
            },
            color: (value) => {
              return this.randomColor(value.dataIndex)
            },
            lineStyle: {
              normal: {
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            tooltip: {
              formatter: function (value) {
                return ''
              }
            },
            data: convertData(BJData)
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke',
              scale: '5'
            },
            label: {
              normal: {
                show: false,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: function (val) {
              if (val[2] === 1000) {
                return 16
              } else {
                return 6
              }
            },
            color: (value) => {
              return this.randomColor(value.dataIndex)
            },
            itemStyle: {
              normal: {
                borderWidth: 1,
                lineStyle: {
                  type: 'solid',
                  shadowBlur: 100
                }
              }
            },
            data: BJData.map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: dataItem[1].value
              }
            }),
            tooltip: {
              formatter: function (value) {
                return value.name
              }
            }
          })

        let option = {
          tooltip: {
            show: true,
            enterable: true,
            trigger: 'item',
            backgroundColor: 'rgba(9, 37, 56, 0.5)',
            extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
          },
          backgroundColor: '',
          // 标题
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          // 地理坐标系组件
          geo: {
            map: 'china',
            top: 0,
            left: '10%',
            right: '10%',
            roam: true,
            silent: true,
            scaleLimit: {
              min: 1,
              max: 100
            },
            label: {
              // true会显示城市名
              normal: {
                show: false,
                color: 'rgba(242,242,242,.3)'
              },
              emphasis: {
                show: false,
                color: 'rgba(242,242,242,.3)'
              }
            },
            itemStyle: {
              // 地图背景色
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#187CBB'
                }, {
                  offset: 1,
                  color: '#1896A3'
                }]),
                borderColor: '#0c3034'
              },
              // 悬浮时
              emphasis: {
                areaColor: ''
              }
            }
          },
          // 系列列表
          series: series
        }
        myChart.setOption(option)
      },
      randomColor (num) {
        let randomNum = num % 3
        if (randomNum === 1) {
          return '#effc1e'
        } else if (randomNum === 2) {
          return '#1de58b'
        } else {
          return '#00f0ff'
        }
      },
      getProjectList () {
        let data = {
          mid: this.currentUser.mid,
          coId: this.currentUser.coId,
          code: this.currentUser.code
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/companyScreen/getProjectInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          let data = res.data.data
          this.projectProvince(data)
        })
      },
      async projectProvince (data) {
        // let set = new Set()
        const loadData = item => new Promise((resolve, reject) => {
          if (item.baiduLng && item.baiduLat) {
            item.location = {name: item.projectTitle, value: [item.baiduLng, item.baiduLat, 10]}
            resolve(item.location)
          } else {
            this.$jsonp(`https://api.map.baidu.com/geocoder/v2/?address=${item.address}&output=json&ak=MErGAwKAYaNnw8jTxTX0hYyscdcdH8Rl`,
            ).then(json => {
              if (json.result) {
                const {lat, lng} = json.result.location
                item.location = {name: item.projectTitle, value: [lng, lat, 10]}
                resolve(item.location)
              }
            })
          }
        })
        this.mapData = [[{name: '佛山'}, {name: '佛山', value: [112.8955, 23.1097, 1000]}]]
        for (let i = 0; i < data.length; i++) {
          const item = await loadData(data[i])
          this.mapData.push([{name: '佛山'}, {name: item.name, value: item.value}])
        }
        this.init()
      },
      mapDataConcat (arr) {
        arr.forEach((item) => {
          let data = [{name: '佛山'}, {name: item, value: 10}]
          this.mapData.push(data)
        })
      }
    }
  }
</script>

<style scoped>

</style>
